import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:word_app/app/modules/model/screen_adapter.dart';

import '../controllers/vocabulary_controller.dart';

class VocabularyView extends GetView<VocabularyController> {
  const VocabularyView({super.key});

  Widget itemWidget(String alertStr, String title, int index) {
    return Flex(
      direction: Axis.horizontal,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          padding: const EdgeInsets.fromLTRB(16, 30, 16, 0),
          width: ScreenAdapterModel.width(96),
          child: Image.asset(
            "images/vocabularyitem$index.png",
            height: ScreenAdapterModel.width(72),
            width: ScreenAdapterModel.width(96),
          ),
        ),
        Expanded(
            flex: 1,
            child: Container(
              padding: const EdgeInsets.fromLTRB(0, 30, 16, 0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.black87,
                        fontSize: 16),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 5, bottom: 5),
                    width: ScreenAdapterModel.width(80),
                    height: ScreenAdapterModel.width(20),
                    decoration: BoxDecoration(
                        color: const Color.fromARGB(255, 121, 159, 255),
                        borderRadius: BorderRadius.circular(5)),
                    child: InkWell(
                      onTap: () {},
                      child: const Center(
                        child: Text(
                          "进入学习",
                          style: TextStyle(color: Colors.white, fontSize: 12),
                        ),
                      ),
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        "已经掌握$alertStr",
                        style: const TextStyle(
                            fontSize: 12, color: Colors.black45),
                      ),
                      Row(
                        children: [
                          const Text(
                            "重置",
                            style:
                                TextStyle(fontSize: 12, color: Colors.black45),
                          ),
                          InkWell(
                            onTap: () {},
                            child: Image.asset(
                              "images/refresh.png",
                              width: 20,
                              height: 20,
                            ),
                          )
                        ],
                      )
                    ],
                  )
                ],
              ),
            ))
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    VocabularyController controller = Get.put(VocabularyController());
    return Scaffold(
      appBar: AppBar(
        title: const Text('词库'),
        centerTitle: true,
      ),
      body: ListView(
        children: controller.List.map((Map v) {
          return itemWidget(v["alert"], v["title"], v["index"]);
        }).toList(),
      ),
    );
  }
}
